<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="800" top="5" :title="`${dialogData.title}参数`">
		<el-form ref="formRef" :rules="rules" :disabled="dialogData.isView" :model="formData" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="名称" prop="name" clearable>
						<el-input v-model="formData!.name" placeholder="请输入名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="分类" prop="category" clearable>
						<el-select v-model="formData!.category" placeholder="请选择分类" style="width: 240px">
							<el-option v-for="item in dict.category" :key="item.value" :label="item.name"
								:value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="返回类型" prop="returnType" clearable>
						<el-select v-model="formData!.returnType" placeholder="请选择返回类型" style="width: 240px">
							<el-option v-for="item in dict.returnType" :key="item.value" :label="item.name"
								:value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="函数名称" prop="functionName" clearable>
						<el-input v-model="formData!.functionName" placeholder="请输入函数名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="排序" prop="orderNumber" clearable>
						<el-input-number v-model="formData!.orderNumber" :min="1" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="描述文字" prop="remark" clearable>
						<el-input v-model="formData!.remark" placeholder="请输入描述文字"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { useModal } from '/@/hooks/useModal';
import rulesObj from './rules';
import { getExpressionDict } from '/@/api/workflow/expression'

const dict = ref({
	category: [],
	returnType: [],
	dialog: []
});


//验证规则
const rules = reactive<FormRules>(rulesObj);

const formData = reactive<any>({
	name: '',
	category: null,
	returnType: null,
	params: null,
	functionName: null,
	orderNumber: 1
});

const initialized = async () => {
	const { data } = await getExpressionDict(null);
	dict.value = data;
}

const formRef = ref<FormInstance>();
const { visible, acceptParams, handleSubmit, dialogData } = useModal(formData, formRef, initialized)

defineExpose({
	acceptParams,
});
</script>
